<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- bootstrap的css核心，定义了很多class -->
<link rel="stylesheet" type="text/css" href="/css/nmsl.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<!--生成弹框、提示框、下拉菜单  -->
<script type="text/javascript" src="/bootstrap/popper.min.js"></script>
<!--bootstrap的js、用于响应事件  -->
<script type="text/javascript" src="/bootstrap/bootstrap.min.js"></script>
<link href="/css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=3.0&ak=NEVPuaso46TGp6IAWEyvVnP75mdbGtX4"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-image: url('image/555.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
}

#container {
	width: 100%;
	height: 90%
}
</style>

</head>
<body>
	<div class="header-bottom">
		<div class="container">
			<nav class="navbar navbar-default">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed"
						data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
				</div>

				<div class="logo">
					<h1>
						<a class="navbar-brand" href="index.html">yoga</a>
					</h1>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse nav-wil"
					id="bs-example-navbar-collapse-1">
					<nav class="cl-effect-1" id="cl-effect-1">
						<ul class="nav navbar-nav">
							<li><a href="ClubMap.html" class="scroll" data-hover="Team">场馆地图</a></li>
							<li><a href="CoachMap.html" class="scroll" data-hover="Team">教练地图</a></li>
						</ul>
					</nav>
				</div>


				<!-- /.navbar-collapse -->
			</nav>

		</div>
	</div>

	<div id="container" class="baidu-maps"></div>
	<script type="text/javascript">
		$(document).ready(
				function() {
					//初始化地图
					var map = new BMap.Map("container");
					var point = new BMap.Point(104.0699519292, 30.5790607666);
					map.centerAndZoom(point, 15);

					//滚轮
					map.enableScrollWheelZoom(true);

					//缩放控件
					map.addControl(new BMap.NavigationControl());
					var ctrlSca = new window.BMap.ScaleControl({
						anchor : BMAP_ANCHOR_BOTTOM_LEFT
					});
					//比例尺  
					map.addControl(ctrlSca);
					map.addControl(new BMap.MapTypeControl({
						mapTypes : [ BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP,
								BMAP_HYBRID_MAP ]

					}));
					//初始化展示数据库内容
					show(map);
				});

		function show(map) {
			$.ajax({
				url : "/map/showcoach",
				type : "post",
				dataType : "json",
				success : function(data) {
					var myGeo = new BMap.Geocoder();
					for (var j = 0; j < data.length; j++) {
						var po = data[j].caddress;
						var pojo = data[j];
						var arr = po.split(",");
						var marker = new BMap.Marker(new BMap.Point(arr[0],
								arr[1]));
						map.addOverlay(marker);
						marker.setLabel(new BMap.Label(pojo.cname, {
							offset : new BMap.Size(20, -10)
						}));
						createTag(marker, pojo);
					}
				}
			});
		}
		function createTag(marker, m) {
			//标注
			var text = "<p>教练姓名："
					+ m.cname
					+ "</p><p>流派："
					+ m.cgenre
					+ "</p><p>地址："
					+ m.caddrmes
					+ "</p><p>详细资料:<a href='http://localhost:8080/coachmes.html?uid="
					+ m.uid + "'>点击查看</p>";
			//给标记添加点击事件以及显示窗口信息
			var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>"
					+ text + "</p>");
			marker.addEventListener("click", function() {
				this.openInfoWindow(infoWindow);
			});
		}
	</script>
</body>
</html>